<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
		<title>个人简介</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui-list-swipe.css" />
		<style type="text/css">
			body {
				background-color: #F5F5F5;
			}
      textarea::-webkit-input-placeholder{ /*WebKit browsers*/
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(102,102,102,1);
      }
      textarea::-moz-input-placeholder{ /*Mozilla Firefox*/
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(102,102,102,1);
      }
      textarea::-ms-input-placeholder{ /*Internet Explorer*/
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(102,102,102,1);
      }
      .keep {
        position: absolute;
        display:inline-block;
        height:2rem;
        width:17.25rem;
        background:linear-gradient(135deg,rgba(132,229,255,1) 0%,rgba(107,180,255,1) 100%,rgba(122,174,229,1) 100%);
        border-radius:1.25rem;
        text-align:center;
        line-height:2rem;
        margin-top:2rem;
        left: 50%;
        /*margin-left:50%;*/
        transform:translateX(-50%);
				font-size:.8rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(255,255,255,1);
      }

			::placeholder {
				font-size:.75rem;
				font-family:PingFangSC-Regular;
				font-weight:400;
				color:rgba(102,102,102,1);
			}

			.content {
				display:inline-block;
				width:100%;
				height:10rem;
				background-color:#fff;
			}

		 .content>div{
		 	display:inline-block;width:100%;height:100%;padding:1rem .75rem;
		 }
		 .content textarea {
		 	font-size:.75rem;
			font-family:PingFangSC-Regular;
			font-weight:400;
			color:rgba(102,102,102,1);
		 }

		 .placeholder_color{
		 	color: #BBBBBB!important;
		 }
		</style>
	</head>

	<body>
		<div id="app" v-cloak="">
      <div class="content">
        <div>
          <textarea v-model="remark" name="remark" maxlength="20" onfocus="focus_text()" onblur="blur_text()" :class="{'placeholder_color':remark == '请输入您的个人简介，最多不超过20字'}">{{remark}}</textarea>
        </div>
      </div>

      <div class="" style="position:relative;">
        <div class="keep" tapmode onclick="keep()" >
          保存
        </div>
      </div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script>
		var swipe;
		var vm = new Vue({
			el: "#app",
			data: {
				remark: '请输入您的个人简介，最多不超过20字',
        notedata: '',
				mes: "请输入您的个人简介，最多不超过20字",
			},
			methods: {
        get_userinfo: function() {
					get_data('api/user/getUserInfo', {
						token: $api.getStorage('token')
					}, function(ret) {
						if(ret.status) {
							save_userinfo_new(ret)
							vm.remark = ret.data.remark == '' ? '请输入您的个人简介，最多不超过20字' : ret.data.remark
						}
					})
				},
        updateUserInfo: function(el, val) {
					var data = {
						token: $api.getStorage('token'),
					}
					data[el] = val
					get_data('api/user/updateUserInfo', data, function(ret) {
						if(ret.status) {
							send_event('logined')
						}
					})
				},
        sel_pic: function() {
					select_pic(function(ret) {
						var pic_path = ret.data
						post_ava('api/user/uploadAvatar', pic_path, function(ret) {
							if(ret.status) {
								vm.avatar = pic_path
								send_event('logined')
							}
						})
					})
				}
			},
			computed: {
				check: function(){
					if (this.remark != "") {
						return this.mes = this.remark;
					}else{
						return this.mes = "请输入您的个人简介，最多不超过20字";
					}
				}
			}
		})
    // var dialog = new auiDialog();
		apiready = function() {
			vm.get_userinfo()
		};

    // 保存文本框中输入的数据
    function keep() {
			toast('保存成功')
			// alert(vm.remark)
			send_event('personal_profile');
			api.closeWin({});
      vm.updateUserInfo('remark', vm.remark)
    }

		function focus_text() {
			if(vm.remark == '请输入您的个人简介，最多不超过20字'){
				vm.remark = ''
			}
		}

		function blur_text() {
			if(vm.remark == ''){
				vm.remark = '请输入您的个人简介，最多不超过20字'
			}
		}

	</script>

</html>
